<template>
  <div class="wrapper">
    <!-- <img src="@/assets/dl.jpg" alt="Background Image" class="background-image"> -->
    <div class="custom-box" style="margin: 200px auto; text-align: center; background-color: #fff; width: 400px; height: 400px; padding: 20px; border-radius: 10px; margin-right: 280px;">
      <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>成语大天才-欢迎登陆</b></div>
      <el-form :model="user" :rules="rules" ref="userForm">
        <el-form-item prop="userName">
          <el-input size="medium" style="width: 290px; margin: 10px 0"  prefix-icon="el-icon-user" v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="medium" style="width: 290px; margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item style="margin: 10px 0; text-align: center">
          <el-button style="width: 290px; background-color: rgb(151, 238, 204); border: 1px solid rgb(113, 218, 169); color: white" size="medium" @click="login">登录</el-button>
        </el-form-item>
        <el-form-item style="margin: 10px 0; text-align: left">
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import {setRoutes} from "@/router";

export default {
  name: "Login",
  data() {
    return {
      user: {},
      pass: {},
      register: {},
      code: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      // 图片验证码
      identifyCode: '',
      // 验证码规则
      identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
      },
      registerRules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
  },
  methods: {
    login() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {  // 表单校验合法
          this.request.post("/User/login", this.user).then(res => {
            if(res.code=='200') {
              localStorage.setItem("user", JSON.stringify(res.data))  // 存储用户信息到浏览器
              localStorage.setItem("menus", JSON.stringify(res.data.menus))  // 存储菜单信息到浏览器
              //动态设置当前用户的路由
              setRoutes()
              this.$router.push("/home")
              this.$message.success("登录成功")
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      });
    },
    handleRegister() {
      this.register = {}
      this.dialogFormVisible1 = true
    },
    handlePass() {
      this.dialogFormVisible = true
      this.pass = {}
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[Math.floor(Math.random() * (this.identifyCodes.length))]
      }
    }

  }
}
</script>

<style>
 .wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  /* margin: 0 auto; */
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio and cover entire container */
  z-index: -1; /* Place the image behind other content */
}
.custom-box {
  margin: 200px auto;
  width: 400px;
  height: 450px;
  padding: 20px;
  border-radius: 10px;
  background-color: #19CAAD;
  box-shadow: 0px 0px 10px rgba(1, 97, 44, 0.24);
}
</style>